<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="sum++">点击+1</button>
  <hr />
  <h2>当前信息为：{{ msg }}</h2>
  <button @click="msg += '?'">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>职业：{{person.job.j1.type}}</h2>
  <h2>薪资：{{person.job.j1.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">加薪</button>
</template>
<script>
// Vue3特点为组合型API，所以要使用computed需要引入
import { ref, reactive,watch } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    // 数据
    let sum = ref(0);
    let msg = ref("你好啊！");
    let person = reactive({
      name:"张三",
      age:18,
      job:{
        j1:{
          type:"前端",
          salary:10
        }
      }
    })

    // 监听器—— 情况一：监视ref所定义的一个响应式数据
    // watch(sum,(newVal,oldVal)=>{
    //   console.log('sum发生变化',newVal,oldVal);
    // },{
    //   immediate:true
    // })

    // 监听器——情况二：监视ref所定义的多个响应式数据
    // watch([sum,msg],(newVal,oldVal)=>{
    //   console.log('sum或msg发生变化',newVal,oldVal);
    // },{
    //   immediate:true
    // })
    // watch([sum, msg],([newSum, newMsg], [prevSum, pervMsg]) => {
    //     if (newSum !== prevSum) console.log("sum发生变化", newSum, prevSum);
    //     if (newMsg !== pervMsg) console.log("msg发生变化", newMsg, pervMsg);
    //   },
    //   {
    //     immediate: true,
    //   }
    // );

    /* 
    监听器——情况三：监视reactive所定义的一个响应式数据——全部属性
    1.注意：使用reactive定义的数据，无法正确获取prevVal
    2.注意：强制开启了deep:true,并且无法关闭deep
     */
    // watch(person,(newVal,pervVal)=>{
    //   console.log('person发生变化',newVal,pervVal);
    // },{deep:false}) //此处deep配置无效

    /* 
    监听器——情况四：监视reactive所定义的一个响应式数据——某个属性
    1.注意：如果需要监视一个对象中的某个属性，参数1必须写成一个函数，
      并且返回值是你要监视的对象的某个属性
     */
    // watch(()=>person.age,(newVal,pervVal)=>{
    //   console.log('person的age发生变化',newVal,pervVal);
    // })

    /* 
    监听器——情况六：监视reactive所定义的一个响应式数据——某一个层级很深的数据
     */
    // watch(()=>person.job,(newVal,pervVal)=>{
    //   console.log('person的job发生变化',newVal,pervVal);
    // },{deep:true}) //此处监视的是reactive对象中的某个属性对象，所以deep生效


    // });
    // 返回一个对象供模版使用
    return {
      sum,
      msg,
      person
    };
  },
  // Vue2的watch依然可以使用，但不建议
  // watch: {

  //   // sum(newVal,oldVal){
  //   //   console.log('sum发生变化',newVal,oldVal);
  //   // }

  //   sum:{
  //     immediate:true,
  //     deep:true,
  //     handler(newVal,oldVal){
  //       console.log('sum发生变化',newVal,oldVal);
  //     }
  //   }
  // },
};
</script>

